<template>
  <div class="m-header">
    <div class="icon">
      
    </div>
    <h1 class="text">Potato Music</h1>

    <router-link to='/user' tag='div' class='mine'>
      <i class="icon-mine"></i>
    </router-link>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {}
</script>

<style lang='stylus' rel='stylesheet/stylus'>
  @import "~common/stylus/variable";
  @import "~common/stylus/mixin";

  .m-header
    position:ralative
    height:44px
    text-align:center
    color:$color-theme
    font-size:0
    .icon
      display:inline-block
      vertical-align:top
      margin-top:6px
      width:30px
      height:32px
      margin-right:9px
      bg-img('logo')
      background-size:30px 32px
    .text
      display:inline-block
      vertical-align:top
      line-height:44px
      font-size:$font-size-large
    .mine
      position:absolute
      right:0
      top:0
      .icon-mine
        display: block
        padding: 12px
        font-size: 20px
        color: $color-theme
</style>